<template>
	<view class="container">
		<view class="bg-white">
			<view class="padding-sm">
				<view class="round flex justify-between align-center bg-color tabs text-df text-white">
					<view :class="{on:mechanicAuditStatus==1}" class="tab round text-center" @click="checkType(1)">
						<block>
							服务商列表</block>

					</view>
					<view :class="{on:mechanicAuditStatus==0}" class="tab round text-center" @click="checkType(0)">

						<block>
							技工申请
						</block>

					</view>
					<view :class="{on:mechanicAuditStatus==2}" class="tab round text-center" @click="checkType(2)">
						<block>
							已邀请
						</block>


					</view>
				</view>
			</view>
		</view>

		<block v-if='mechanicAuditStatus==1'>
			<view @click="toPage('/pagesA/pages/serviceUserList/serviceUserInfo?id='+item.id)"
				class="padding margin-sm bg-white flex justify-start radius10" v-for="(item,index) in list"
				:key='index'>
				<image :src="item.logo" mode="" class="round cu-avatar"></image>
				<!-- @click.stop="toPage('/filePage/pages/detail-or-order/detail-or-order')" -->
				<view class="margin-left-sm f-grow1">
					<view class="flex justify-between align-center">
						<view class="text-bold text-181818 text-xl">
							{{item.shopName}}
						</view>

					</view>
					<view class="flex  justify-between align-center text-sm text-666 margin-top-sm">
						<view class="flex align-center text-sm text-666">
							<view>
								工人数量<text class="text-15 margin-left-xs">{{item.workerCount}}</text>
							</view>
							<view class="margin-left">
								工单数量<text class="text-15 text-FF3636 margin-left-xs"> {{item.serviceOrderCount}}</text>
							</view>
						</view>
						<view v-if='mechanicAuditStatus==0'>
							<block v-if='item.mechanicAuditStatus==1'>审核通过</block>
							<block v-else-if='item.mechanicAuditStatus==2'>审核不通过</block>
							<block v-else>未审核</block>
						</view>
						<view v-if='mechanicAuditStatus==2'>
							<block v-if='item.applyAuditStatus==1'>邀请通过</block>
							<block v-else-if='item.applyAuditStatus==2'>邀请不通过</block>
							<block v-else>邀请中</block>
						</view>
					</view>
					<view class="flex justify-between align-center text-sm text-999" style="margin-top: 60rpx;">
						<view class="">
							创建时间 {{item.createTime}}
						</view>
						<view class="margin-left">
							电话:{{item.userMobile}}
						</view>
					</view>
					<view class="margin-top flex justify-end align-center">
						<button v-if='mechanicAuditStatus==1' @click.stop="submit(item)"
							class="bg-color text-13 text-white btn round">
							申请

						</button>
						<button v-if='mechanicAuditStatus==2 &&item.applyAuditStatus==0' @click.stop="verify(item)"
							class="bg-color text-13 text-white btn round">
							审核

						</button>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view @click="toPage('/pagesA/pages/serviceUserList/serviceUserInfo?id='+item.ivShopId)"
				class="padding margin-sm bg-white flex justify-start radius10" v-for="(item,index) in list"
				:key='index'>
				<image :src="item.logo" mode="" class="round cu-avatar"></image>
				<!-- @click.stop="toPage('/filePage/pages/detail-or-order/detail-or-order')" -->
				<view class="margin-left-sm f-grow1">
					<view class="flex justify-between align-center">
						<view class="text-bold text-181818 text-xl">
							{{item.shopName}}
						</view>

					</view>
					<view class="flex  justify-between align-center text-sm text-666 margin-top-sm">
						<view class="flex align-center text-sm text-666">
							<view>
								工人数量<text class="text-15 margin-left-xs">{{item.workerCount}}</text>
							</view>
							<view class="margin-left">
								工单数量<text class="text-15 text-FF3636 margin-left-xs"> {{item.serviceOrderCount}}</text>
							</view>
						</view>
						<view v-if='mechanicAuditStatus==0'>
							<block v-if='item.mechanicAuditStatus==1'>审核通过</block>
							<block v-else-if='item.mechanicAuditStatus==2'>审核不通过</block>
							<block v-else>未审核</block>
						</view>
						<view v-if='mechanicAuditStatus==2'>
							<block v-if='item.applyAuditStatus==1'>邀请通过</block>
							<block v-else-if='item.applyAuditStatus==2'>邀请不通过</block>
							<block v-else>邀请中</block>
						</view>
					</view>
					<view class="flex justify-between align-center text-sm text-999" style="margin-top: 60rpx;">
						<view class="">
							创建时间 {{item.createTime}}
						</view>
						<view class="margin-left">
							电话:{{item.userMobile}}
						</view>
					</view>
					<view class="margin-top flex justify-end align-center">
						<button v-if='mechanicAuditStatus==1' @click.stop="submit(item)"
							class="bg-color text-13 text-white btn round">
							申请

						</button>
						<button v-if='mechanicAuditStatus==2 &&item.applyAuditStatus==0' @click.stop="verify(item)"
							class="bg-color text-13 text-white btn round">
							审核

						</button>
					</view>
				</view>
			</view>
		</block>



		<uni-load-more :status="loading" />
	</view>
</template>

<script>
	import BetterPull from '@/common/util/BetterPull'
	export default {
		mixins: [
			BetterPull({
				async getPage(page, done) {
					this.loading = 'loading';
					let obj = {}
					let api = ''
					if (this.mechanicAuditStatus == 1) {
						obj = {
							pageNum: page,
							pageSize: 10,
							shopType: 1
						}
						api = 'getMyShopUser'
					} else if (this.mechanicAuditStatus == 0) {
						obj = {
							pageNum: page,
							pageSize: 10,
							userId: uni.getStorageSync("userId"),

						}
						api = 'mechanicApplyShopList'
					} else {
						obj = {
							pageNum: page,
							pageSize: 10,
							userId: uni.getStorageSync("userId"),
						}
						api = 'mechanicShopList'
					}
					const [err, res] = await this.$get(this.$api[api],
						obj)
					if (res) {
						var data = res.data.list
						done(data);
						if (data.length < 10) {
							this.loading = 'noMore';
						} else {
							this.loading = 'more';
						}

					}
					if (err) {
						done([]);
						this.loading = 'noMore';
					}
				}
			})
		],
		onLoad(options) {
			if (options.issue) {
				this.issue = options.issue
			}
			if (options.shopId) {
				this.shopId = options.shopId
			}
		},


		data() {
			return {
				baseUrl: this.$config.baseUrl,
				loading: 'more',
				userName: '',
				userMobile: '',
				mechanicAuditStatus: 1,
				merNum: 0,
				merNumEd: 0,
				merCount: 0,
				reFreshStatus: "",
				shopId: '',
				issue: '',
				shopId: ''
			};
		},
		methods: {
			toPage(url) {
				console.log(url)
				this.$util.openNewPage(url)
			},

			checkType(status) {
				this.mechanicAuditStatus = status
				this.list = []
				this.Refresh();
			},
			submit(item) {
				const that = this
				uni.showModal({
					content: '你确定申请加入该服务商吗',
					success: function(res) {
						if (res.confirm) {
							const data = {
								userId: uni.getStorageSync('userId'),
								shopId: item.id,
								workerType: 1
							}
							that.$get(that.$api.applyForShop, data).then(res => {
								const [err, rs] = res
								if (rs) {
									that.$util.msg(rs.message)
									that.Refresh()
								}
							})



						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			verify(item) {
				const that = this
				uni.showModal({
					content: '你确定同意加入该服务商吗',
					success: function(res) {
						if (res.confirm) {
							const data = {
								auditUserId: uni.getStorageSync('userId'),
								id: item.applyAuditId,
								auditStatus: 1
							}
							that.$jsonPost(that.$api.auditForShop, data).then(res => {
								const [err, rs] = res
								if (rs) {
									that.$util.msg(rs.message)
									setTimeout(() => {
										uni.navigateBack({

										})
									}, 1000)
								}
							})

							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		padding: 4rpx;

		.tab {
			width: 350rpx;
			padding: 16rpx;
		}

		.on {
			background: #fff;
			color: #ED7200;
			font-weight: bold;
		}
	}

	.footer {
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		bottom: 98rpx;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.btn {
		padding: 20rpx 50rpx;
	}
</style>
